<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue入门指南——Vue组件生命周期</title>
    <link rel="stylesheet" href="common.css">
    <script type="importmap">
      {
        "imports": {
          "vue": "https://lib.baomitu.com/vue/latest/vue.esm-browser.js"
        }
      }
    </script>
  </head>
  <body>
    <div id="app">
      <p>{{message}}</p>
    </div>
    <script type="module">
      import { createApp } from "vue";
      
      createApp({
        data() {
          return {
            message: "生命周期的Hook钩子",
          };
        },
        created() {
            console.log("created:响应式数据、计算属性、方法和监听器设置完成，节点未挂载");
            // Uncaught TypeError: Cannot read properties of null (reading 'textContent') 
            // 报错 ---> 为空，当前拿不到节点
            // console.log("created:" + document.querySelector("p").textContent);
        },
        mounted() {
            console.log("mounted:DOM节点已创建......");
            console.log("mounted:" + document.querySelector("p").textContent);
        },
        updated() {
            console.log("updated:DOM节点重新渲染......");
        },
        unmounted() {
            console.log("unmounted:DOM节点卸载......");
        }
      }).mount("#app");
    </script>
  </body>
</html>
